import { CoursewaresListView } from '@/components/CoursewaresList';
import { StudyPlanContentEntity } from '@/components/SourceSelect/Entity/interface';
import Source from '@/components/SourceSelect/Entity/Source';
import { tradeGroupResult } from '@/components/Trade/utils';
import { Card, Descriptions } from 'antd';
import { useEffect, useState } from 'react';

export interface StudyPlanDetailPorps {
  guid?: string;
  name?: string;
  createTime?: string;
  coursewareList?: Source[][];
  /**
   * @desc 上架信息
   */
  shelfInfo?: {
    area?: string;
    org?: string;
    trade?: string;
    showTrade?: tradeGroupResult[];
  };
}

export function StudyPlanDetail({ coursewareList, name, createTime, shelfInfo, guid }: StudyPlanDetailPorps) {
  const [list, setList] = useState(coursewareList ?? []);
  useEffect(() => {
    console.log('shelfInfo', shelfInfo);
    if (!coursewareList?.length && guid) {
      Source.listWithRelationType('learn', guid).then((data) => {
        const result: Source[][] = [];
        data?.reduce((a, b) => {
          const origin = b.origin as StudyPlanContentEntity;
          const aArr = (a[origin.sortNum - 1] ??= []);
          if (origin.coursewareSortNum) {
            aArr[origin.coursewareSortNum - 1] = b;
          } else {
            aArr.push(b);
          }
          return a;
        }, result);
        setList(result);
      });
    }
  }, [coursewareList, guid]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Card title="计划模版基本信息">
        <Descriptions>
          <Descriptions.Item label="计划模版名称">{name}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{createTime}</Descriptions.Item>
        </Descriptions>
      </Card>
      {shelfInfo ? (
        <Card title="上架信息">
          <Descriptions column={1}>
            <Descriptions.Item label="地域">{shelfInfo.area || '--'}</Descriptions.Item>
            <Descriptions.Item label="组织类型">{shelfInfo.org || '--'}</Descriptions.Item>
            <Descriptions.Item label="行业">
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {shelfInfo?.showTrade &&
                  shelfInfo?.showTrade.map((t) => {
                    return (
                      <div key={t.entTypeCode} style={{ marginBottom: '6px' }}>
                        {t.name}——{t.tradeDictString};
                      </div>
                    );
                  })}
                {!shelfInfo?.showTrade || !shelfInfo?.showTrade.length ? '--' : ''}
              </div>
            </Descriptions.Item>
          </Descriptions>
        </Card>
      ) : null}
      <Card title="计划模版内容" bodyStyle={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {list.map((v, index) => {
          return (
            <Card key={index} title={'课件包' + (index + 1)} type="inner">
              <CoursewaresListView value={v} />
            </Card>
          );
        })}
      </Card>
    </div>
  );
}
